<template>
    <div class="page">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-tag"></i> 课程查看</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="operating">
                <el-date-picker
                    :picker-options="years"
                    v-model="year"
                    @change="queryCourseChange"
                    :clearable="false"
                    value-format="yyyy"
                    format="yyyy"
                    type="year"
                    placeholder="学年"
                >
                </el-date-picker>
                <el-select ref="term" v-model="term" placeholder="学期" @change="queryCourseChange" class="handle-select mr10">
                    <el-option value="1" label="第一学期"> </el-option>
                    <el-option value="2" label="第二学期"> </el-option>
                </el-select>
            </div>
            <div>
                <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="courseLoading">
                    <el-table-column prop="course_id" label="ID" width="55" align="center"></el-table-column>
                    <el-table-column prop="course_name" label="课程名" width="200"></el-table-column>
                    <el-table-column prop="course_nature" label="课程类型" width="100">
                        <template slot-scope="scope">
                            <el-tag type="info">{{ scope.row.course_nature }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="course_time" label="学时" ></el-table-column>
                    <el-table-column prop="course_credit" label="学分" ></el-table-column>
                    <el-table-column prop="grade" label="面向年级" ></el-table-column>
                    <el-table-column prop="have_selected_person" label="选课人数" ></el-table-column>
                    <el-table-column prop="max_selected_person" label="最大选课人数" ></el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="handleView(scope.$index, scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>


<script>
import { getRequest } from '@/api/index';
import { postRequest } from '@/api/index';

export default {
    name: 'ViewCourse',
    components: {},
    data() {
        return {
            term: '2',
            year: '2020',
            tableData: [],
            courseLoading: false,
            years: {
                disabledDate: time => {
                    // 不能选择今天之后的年
                    let now = new Date();
                    return time.getFullYear() > now.getFullYear();
                }
            },
        };
    },
    created() {
        this.initDate();
        this.getData();
    },
    methods: {
        initDate() {
            let now = new Date();
            this.year = String(now.getFullYear());
            let month = now.getMonth();
            if (month >= 9 && month < 2) {
                this.term = '1'
            } else {
                this.term = '2'
            }
        },
        getData() {
            this.getCourses();
        },
        getCourses(){
            this.courseLoading = true;
            getRequest('/login/teacher/class/get_teacher_course', {term: this.term, year: this.year}).then(res => {
                if (res.code === 200) {
                    this.tableData = res.data;
                }
                this.courseLoading = false;
            }, err => {

            })
        },
        // 查看详情
        handleView(index, row) {
            this.$router.push({path:'/teacher/student', query: {courseId: row.course_id}});
        },
        queryCourseChange() {
            this.getCourses();
        }
    }
};
</script>

<style scoped>
.operating {
    float: right;
    margin: 10px;
}
</style>
